import { ref, watch, defineComponent, type PropType } from 'vue'
import { Divider } from 'ant-design-vue'
import { type Column } from './indexConfig'
import c from './assets/index.module.less'
import { mapData } from '@/store/modules/mapData'

const mapDatas = mapData()
export default defineComponent({
  name: 'EquipmentInfoPopup',
  props: {
    infoColumn: {
      type: Array as PropType<Record<string, any>[]>,
      default: () => []
    },
    infoData: {
      type: Object as PropType<Record<string, any>>,
      default: () => ({})
    }
  },

  setup(props) {
    const COLUMN = ref<Record<string, any>[]>([])

    watch(
      () => props.infoData,
      () => {
        const targetType = props.infoData.linkData

        if (targetType !== 'passengerPlaneData') {
          COLUMN.value = props.infoColumn
        } else {
          COLUMN.value = props.infoColumn.filter((item) => {
            return item.value !== 'affiliationBase' && item.value !== 'weaponLoad'
          })
        }
      }
    )

    const getImgPathByImgName = (name: string) => {
      return new URL(`../../../../assets/images/plane-ship/${name}.png`, import.meta.url).href
    }

    const renderContent = (type: string, content: string) => {
      switch (type) {
        case 'img':
          return <img src={getImgPathByImgName(content)} class={c.img} alt="图片缺失"></img>
        case 'longitude':
          return <span>{mapDatas.getplaneInfo(props.infoData.id)?.position[0].toFixed(6)}</span>
        case 'latitude':
          return <span>{mapDatas.getplaneInfo(props.infoData.id)?.position[1].toFixed(6)}</span>
        case 'desiredTrack':
          return <span>{mapDatas.getplaneInfo(props.infoData.id)?.desiredTrack}</span>
        default:
          return <span>{content}</span>
      }
    }
    return () => (
      <section class={c.equipmentInfoPopup}>
        <div class={c.target}>重点目标</div>
        <Divider style={{ margin: '10px 0', backgroundColor: '#fff' }} />
        <div class={c.infoContainer}>
          {COLUMN.value.map((col: Column) => (
            <div>
              <span>{col.label}</span>
              {renderContent(col.value, mapDatas.getplaneInfo(props.infoData.id)?.[col.value])}
            </div>
          ))}
        </div>
      </section>
    )
  }
})
